<template>
	<view class="uni_info">
		<!-- 选项卡切换 -->
		<view class="uni_infoNumInfo">
			<view class="uni_headerInfo">
				<view class="uni_tabs">
					<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
				</view>
				<view class="uni_line"></view>
			</view>
			<!-- 账号信息 -->
			<view class="uni_numInfo" v-show="showInfo">
				<!-- 账号 -->
				<view class="uni_accountNumber">
					<view class="uni_title">
						账号
					</view>
					<view class="uni_inNum">
						<input type="text" v-model="prisonInfo.textValue" class="uni_inNum_Text" placeholder="请输入账号" />
					</view>
				</view>
				<!-- 密码 -->
				<view class="uni_password">
					<view class="uni_titleWord">
						密码
					</view>
					<view class="uni_inPassword">
						<input type="password" v-model="prisonInfo.passwordValue" class="uni_inNum_psd"
							placeholder="请输入密码" />
					</view>
				</view>
				<!-- 提示 -->
				<view class="uni_tips">
					{{tipsInfo}}
				</view>
				<!-- 按钮 -->
				<view class="uni_btn" @click="btnHandler">
					<view class="uni_fs">
						确定
					</view>
				</view>
				<!-- 暂时跳过 -->
				<view class="uni_jump">
					暂时跳过绑定
				</view>
			</view>
			<!-- 班级信息 -->
			<view class="uni_classInfo" v-show="showInfo == false">
				<!-- 学校 -->
				<view class="uni_classSchool">
					<view class="uni_schooltop">学校</view>
					<view class="uni_schoolbtm">
						<u-input v-model="xuexiaoValue" style="text-indent: 33rpx;" :type="type" :border="border"
							@click="showXuexiao = true" placeholder="请选择学级" />
						<u-action-sheet :list="xuexiaoActionSheetList" v-model="showXuexiao"
							@click="actionSheetCallback"></u-action-sheet>
					</view>
				</view>
				<!-- 学级 -->
				<view class="uni_classSchoolLevel">
					<view class="uni_schooltop">学级</view>
					<view class="uni_schoolbtm">
						<u-input v-model="xuejiValue" style="text-indent: 33rpx;" :type="type" :border="border"
							@click="showXueji = true" placeholder="请选择学级" />
						<u-action-sheet :list="xuejiActionSheetList" v-model="showXueji"
							@click="actionSheetCallback"></u-action-sheet>
					</view>
				</view>
				<!-- 专业 -->
				<view class="uni_classSchoolProfession">
					<view class="uni_schooltop">专业</view>
					<view class="uni_schoolbtm">
						<u-input v-model="zhuanyeValue" style="text-indent: 33rpx;" :type="type" :border="border"
							@click="showZhuanye = true" placeholder="请选择专业" />
						<u-action-sheet :list="zhuanyeActionSheetList" v-model="showZhuanye"
							@click="actionSheetCallback"></u-action-sheet>
					</view>
				</view>
				<!-- 班级 -->
				<view class="uni_classSchoolGrade">
					<view class="uni_schooltop">班级</view>
					<view class="uni_schoolbtm">
						<u-input v-model="banjiValue" style="text-indent: 33rpx;" :type="type" :border="border"
							@click="showBanji = true" placeholder="请选择班级" />
						<u-action-sheet :list="banjiActionSheetList" v-model="showBanji"
							@click="actionSheetCallback"></u-action-sheet>
					</view>
				</view>

				<!-- 提示 -->
				<view class="uni_tips">
					{{tipsInfoclass}}
				</view>
				<!-- 按钮 -->
				<view class="uni_btn" @click="btnHandlerClass">
					<view class="uni_fs">
						确定
					</view>
				</view>
				<!-- 暂时跳过 -->
				<view class="uni_jump">
					暂时跳过绑定
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				showInfo: true,
				prisonInfo: {
					textValue: '',
					passwordValue: '',
				},
				tipsInfo: '温馨提示:绑定账号后,可通过已绑定账号登录',
				tipsInfoclass: '温馨提示：若已绑定手机号，账号密码均默认为手机号,若未绑定，请去我的—设置内进行绑定。',
				list: [{
					name: '绑定账号'
				}, {
					name: '绑定班级'
				}, ],
				current: 0,

				type: 'select',

				xuexiaoValue: '',
				showXuexiao: false,
				xuexiaoActionSheetList: [{
						text: '职业高中'
					},
					{
						text: '张家口一中'
					},
					{
						text: '衡水一中'
					}
				],

				xuejiValue: '',
				showXueji: false,
				xuejiActionSheetList: [{
						text: '大一'
					},
					{
						text: '大二'
					},
					{
						text: '大三'
					},
					{
						text: '大四'
					},
				],

				zhuanyeValue: '',
				showZhuanye: false,
				zhuanyeActionSheetList: [{
						text: '数学'
					},
					{
						text: '物理'
					},
					{
						text: '化学'
					},
					{
						text: '生物'
					},
				],

				banjiValue: '',
				showBanji: false,
				banjiActionSheetList: [{
						text: '1班'
					},
					{
						text: '2班'
					},
					{
						text: '3班'
					},
					{
						text: '4班'
					},
				],

			};
		},

		methods: {
			change(index) {
				this.current = index;
				this.showInfo = !this.showInfo
				console.log(index, 'index')
			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				if (this.showXueji) {
					this.xuejiValue = this.xuejiActionSheetList[index].text;
					this.showXueji = false;
				} else if (this.showZhuanye) {
					this.zhuanyeValue = this.zhuanyeActionSheetList[index].text;
					this.showZhuanye = false;
				} else if (this.showBanji) {
					this.banjiValue = this.banjiActionSheetList[index].text;
					this.showBanji = false;
				} else if (this.showXuexiao) {
					this.xuexiaoValue = this.xuexiaoActionSheetList[index].text;
					this.showXuexiao = false
				}
			},
			// 点击确定
			btnHandler() {
				const {
					textValue,
					passwordValue
				} = this.prisonInfo

				if (textValue.trim() != '' || passwordValue.trim() != '') {
					uni.showToast({
						title: '登录成功',
						icon: 'none',
					});
					console.log(textValue, passwordValue)
				} else {
					uni.showToast({
						title: '账号或密码不能为空',
						icon: 'none',
					});
					this.prisonInfo.textValue = ''
					this.prisonInfo.passwordValue = ''
				}

			},
			btnHandlerClass() {
				this.xuejiValue = ''
				this.zhuanyeValue = ''
				this.banjiValue = ''
				this.xuexiaoValue = ''
			}
		}
	}
</script>

<style lang="scss">
	.uni_info {
		width: 100%;
		height: 100%;
		background: #FFFFFF;

		// 账号
		.uni_infoNumInfo {
			position: relative;

			.uni_headerInfo {

				// 线条
				.uni_line {
					width: 100%;
					height: 1rpx;
					background: #F0F1F8;
				}
			}

			// 账号信息
			.uni_numInfo {

				// 账号
				.uni_accountNumber {
					.uni_title {
						// width: 58rpx;
						margin: 78rpx 0 0 61rpx;
						height: 28rpx;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #181623;
						line-height: 42rpx;
					}

					.uni_inNum {
						// box-sizing: border-box;

						.uni_inNum_Text {
							width: 646rpx;
							height: 96rpx;
							background: #F8F9FC;
							border: 1px solid #5257FF;
							border-radius: 16rpx;
							margin: 24rpx 0 0 52rpx;
							text-indent: 34rpx;
						}
					}
				}

				// 密码
				.uni_password {
					.uni_titleWord {
						margin: 50rpx 0 0 61rpx;
						height: 28rpx;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #181623;
						line-height: 42rpx;
					}

					.uni_inPassword {
						.uni_inNum_psd {
							width: 646rpx;
							height: 96rpx;
							background: #F8F9FC;
							border: 1px solid #5257FF;
							border-radius: 16rpx;
							margin: 24rpx 0 0 52rpx;
							text-indent: 34rpx;
						}
					}
				}

				// 提
				.uni_tips {
					// width: 544rpx;
					height: 26rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #527FFF;
					line-height: 42rpx;
					margin: 35rpx 0 0 51rpx;
				}

				// 按钮
				.uni_btn {
					width: 552rpx;
					height: 96rpx;
					background: #5257FF;
					border-radius: 48rpx;
					position: fixed;
					left: 50%;
					bottom: 10%;
					transform: translateX(-50%) translateY(-50%);

					.uni_fs {
						width: 68rpx;
						height: 32rpx;
						font-size: 34rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translateX(-50%) translateY(-50%);
					}
				}

				// 暂时跳过绑定
				.uni_jump {
					position: fixed;
					left: 50%;
					bottom: 8%;
					transform: translateX(-50%) translateY(-50%);
					width: 189rpx;
					height: 31rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #5257FF;
					line-height: 42rpx;
				}
			}

			// 班级信息
			.uni_classInfo {
				.uni_classSchool {
					width: 100%;
					display: flex;
					flex-direction: column;


					.uni_schooltop {
						margin: 78rpx 0 0 62rpx;
						// width: 57rpx;
						height: 28rpx;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #181623;
						line-height: 42rpx;
					}

					.uni_schoolbtm {
						width: 646rpx;
						height: 96rpx;
						background: #F8F9FC;
						border-radius: 16rpx;
						margin: 24rpx 0 0 52rpx;
					}
				}

				// 学级
				.uni_classSchoolLevel {
					width: 100%;
					display: flex;
					flex-direction: column;


					.uni_schooltop {
						margin: 78rpx 0 0 62rpx;
						// width: 57rpx;
						height: 28rpx;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #181623;
						line-height: 42rpx;
					}

					.uni_schoolbtm {
						width: 646rpx;
						height: 96rpx;
						background: #F8F9FC;
						border-radius: 16rpx;
						margin: 24rpx 0 0 52rpx;
					}
				}

				// 专业
				.uni_classSchoolProfession {
					width: 100%;
					display: flex;
					flex-direction: column;

					.uni_schooltop {
						margin: 78rpx 0 0 62rpx;
						// width: 57rpx;
						height: 28rpx;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #181623;
						line-height: 42rpx;
					}

					.uni_schoolbtm {
						width: 646rpx;
						height: 96rpx;
						background: #F8F9FC;
						border-radius: 16rpx;
						margin: 24rpx 0 0 52rpx;
					}
				}

				// 班级
				.uni_classSchoolGrade {
					width: 100%;
					display: flex;
					flex-direction: column;


					.uni_schooltop {
						margin: 78rpx 0 0 62rpx;
						// width: 57rpx;
						height: 28rpx;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #181623;
						line-height: 42rpx;
					}

					.uni_schoolbtm {
						width: 646rpx;
						height: 96rpx;
						background: #F8F9FC;
						border-radius: 16rpx;
						margin: 24rpx 0 0 52rpx;
					}
				}

				// 提示
				.uni_tips {
					// width: 544rpx;
					height: 26rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #527FFF;
					line-height: 42rpx;
					margin: 35rpx 0 0 51rpx;
				}

				// 按钮
				.uni_btn {
					width: 552rpx;
					height: 96rpx;
					background: #5257FF;
					border-radius: 48rpx;
					position: fixed;
					left: 50%;
					bottom: 10%;
					transform: translateX(-50%) translateY(-50%);

					.uni_fs {
						width: 68rpx;
						height: 32rpx;
						font-size: 34rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translateX(-50%) translateY(-50%);
					}
				}

				// 暂时跳过绑定
				.uni_jump {
					position: fixed;
					left: 50%;
					bottom: 8%;
					transform: translateX(-50%) translateY(-50%);
					width: 189rpx;
					height: 31rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #5257FF;
					line-height: 42rpx;
				}
			}
		}
	}
</style>